<template>
	<div class="site">
		<div class="siteInfoMain">
			<!-- 左侧详情 -->
			<div class="siteMainLeft">
				<el-row :gutter="24" class="sourow">
					<el-col :span="24" :offset="0" class="scopeInput">
						<span style="color: #696b6f; font-size: 16px">站点ID:</span>
						<el-input :disabled="true" v-model="siteInfo.SiteID"></el-input>
					</el-col>
				</el-row>
				<el-row :gutter="24" class="sourow">
					<el-col :span="24" :offset="0" class="scopeInput">
						<span style="color: #696b6f; font-size: 16px">站点名称:</span>
						<el-input placeholder="" v-model="siteInfo.SiteName" :disabled="!modifyStatus"></el-input>
					</el-col>
				</el-row>
				<el-row :gutter="24" class="sourow">
					<el-col :span="24" :offset="0" class="scopeInput">
						<span style="color: #696b6f; font-size: 16px">站点网址:</span>
						<el-input placeholder="" v-model="siteInfo.SiteAddr" :disabled="!modifyStatus"></el-input>
					</el-col>
				</el-row>
				<el-row :gutter="24" class="sourow">
					<el-col :span="24" :offset="0" class="scopeInput">
						<span style="color: #696b6f; font-size: 16px">站点主目录:</span>
						<el-input placeholder="" :disabled="true" v-model="siteInfo.WorkDir"></el-input>
					</el-col>
				</el-row>
				<el-row :gutter="24" class="sourow" style="margin-bottom: 0">
					<el-col :span="24" :offset="0" class="scopeInput">
						<span style="color: #696b6f; font-size: 16px">keywords:</span>
					</el-col>
				</el-row>

				<el-row :gutter="24" class="sourow" style="margin-top: 0">
					<el-col :span="24" :offset="0" class="scopeInput">
						<el-table
							ref="Params"
							:data="siteInfo.keywords"
							tooltip-effect="dark"
							style="width: 80%; margin-bottom: 20px; margin-top: 10px; border-radius: 5px"
							border
							stripe
						>
							<el-table-column align="center" prop="content" label="content" />
							<el-table-column align="center" label="操作" width="125px" v-if="modifyStatus">
								<template #default="{ row, column, $index }">
									<el-button type="text" size="small" style="color: red" @click="delParam(row, $index)"> 删 除 </el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
					<el-button type="primary" size="default" style="margin-left: 375px" @click="addParms" v-show="modifyStatus">添加</el-button>
				</el-row>
			</div>
			<!-- 右侧log -->
			<div class="siteMainRight">
				<span style="color: #696b6f; font-size: 16px">Logo:</span>
				<el-image :src="siteInfo.SiteLogo" style="margin-top: 10px; border-radius: 5px">
					<div slot="error" class="image-slot">加载失败</div>
					<div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
				</el-image>
			</div>
		</div>
		<span style="color: #696b6f; font-size: 16px">描述:</span>

		<!-- 多行文本 -->
		<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入内容" v-model="siteInfo.description" style="margin-top: 10px"> </el-input>
		<div class="footBtn">
			<el-button type="primary" size="default" @click="modifyStatus = true">修改</el-button>
			<el-button type="primary" size="default" v-show="modifyStatus" @click="submitPost">提交</el-button>
			<el-button type="primary" size="default" v-show="modifyStatus" @click="cancel">取消</el-button>
		</div>
		<!-- 添加参数弹窗-->
		<el-dialog :close-on-click-modal="false" v-model="popUpDisplay" width="750px" append-to-body title="添加内容弹窗" class="dialog">
			<el-form label-width="80px">
				<el-form-item label="content">
					<el-input v-model="formContent.content" />
				</el-form-item>
			</el-form>
			<div slot="footer">
				<div style="display: flex; justify-content: end">
					<el-button type="danger" class="el-icon-close" @click="addCancel">取 消</el-button>
					<el-button type="primary" class="el-icon-check" @click="ParamsFormSubmit">确 定</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';

import { useWebSite } from '/@/stores/websiteState';
import { httpReqeustApi } from '/@/api/linxyun/base';

const httpReqeust = httpReqeustApi();

export default defineComponent({
	name: 'siteInfoConfig',
	setup(props, c) {
		// 站点信息
		let siteInfo = reactive({
			CustomerID: '',
			EntCode: '',
			SiteID: '',
			SiteName: '',
			SiteAddr: '',
			WorkDir: '',
			keywords: [] as any[],
			SiteLogo: '',
			description: '',
		});
		// 是否是修改状态
		let modifyStatus = ref(false);
		// 弹窗是否显示
		let popUpDisplay = ref(false);
		// 表单内容
		let formContent = reactive({
			content: '',
		});

		const stores = useWebSite();
		const { webSiteInfo } = storeToRefs(stores);
		//router是全局路由对象
		const router = useRouter();
		// 页面加载时
		onMounted(() => {
			// 发送请求查询站点的信息
			const parms = {
				SiteID: webSiteInfo.value.SiteID
			};
			httpReqeust.Post('query_site_info', parms).then((res: any) => {
				if (res.code == '0000' && res.Records) {
					let Res = res.Records[0];
					siteInfo.SiteName = Res.SiteName;
					siteInfo.CustomerID = Res.CustomerID;
					siteInfo.SiteID = Res.SiteID;
					siteInfo.SiteName = Res.SiteName;
					siteInfo.SiteAddr = Res.SiteAddr;
					siteInfo.WorkDir = Res.WorkDir;
					siteInfo.keywords =eval('(' + Res.keywords.toString().replaceAll('\\', '') + ')');
					siteInfo.SiteLogo = Res.SiteLogo;
					siteInfo.description = Res.description;
				} else {
					ElMessage({
						type: 'error',
						message: '查询站点信息失败',
					});
					cancel();
				}
			});

		});
		//删除当前行的参数
		const delParam = (row: any, index: any) => {
			ElMessageBox.confirm('此操作将删除该行, 是否继续?', 'Warning', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					siteInfo.keywords.splice(index, 1);
					ElMessage({
						type: 'success',
						message: '删除成功',
					});
				})
				.catch(() => {
					ElMessage({
						type: 'info',
						message: '已取消删除',
					});
				});
		};
		// 添加参数(添加弹窗显示)
		const addParms = () => {
			popUpDisplay.value = true;
		};
		// 新增参数弹窗不显示（关闭弹窗）
		const addCancel = () => {
			popUpDisplay.value = false;
			formContent.content = '';
		};

		const ParamsFormSubmit = () => {
			// 将新增弹窗的数据添加到keywords
			if(siteInfo.keywords.toString()===''){
				siteInfo.keywords=[]
			}
			siteInfo.keywords.push({ ...formContent });
			// 弹窗不显示
			addCancel();
		};
		// 取消修改返回上一个页面
		const cancel = () => {
			router.go(-1);
		};
		// 提交
		const submitPost = () => {
			let { SiteID, SiteName, SiteAddr, SiteLogo, description, MainDir, keywords } = JSON.parse(JSON.stringify(siteInfo));

			let parms = { SiteID, SiteName, SiteAddr, SiteLogo, description, MainDir, keywords:JSON.stringify(keywords) };
			// 发生请求修改信息
			httpReqeust.Post('update_site_info', parms).then((res: any) => {
				if ((res.code = '0000')) {
					ElMessage({
						type: 'success',
						message: '修改成功!',
					});
				} else {
					ElMessage({
						type: 'error',
						message: '修改失败',
					});
				}
				cancel();
			});
		};
		return {
			siteInfo,
			modifyStatus,
			delParam,
			addParms,
			popUpDisplay,
			formContent,
			addCancel,
			ParamsFormSubmit,
			cancel,
			submitPost,
		};
	},
});
</script>
<style scoped>
.site {
	width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: 5px;
	background-color: #ffffff;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.siteInfoMain {
	width: 100%;
	display: flex;
	flex-direction: row;
}
.siteMainLeft {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.siteMainRight {
	width: 30%;
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.sourow {
	margin: 20px 0;
}
.scopeInput {
	display: flex;
}
.scopeInput > span {
	display: inline-block;
	line-height: 36px;
	width: 90px;
}
.footBtn {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
</style>
<style>
.scopeInput > .el-input {
	width: 250px;
	margin-left: 20px;
}
.siteMainLeft .el-table thead .el-table__cell {
	background-color: #eef1f6;
}
.footBtn > button {
	width: 100px;
	margin: 0 20px;
}
.image-slot {
	width: 390px;
	height: 260px;
	background-color: #f5f7fa;
	color: #cac4d5;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
